---
description: How to customize icons in your Plasmo browser extension.
---

import { Callout } from "nextra-theme-docs"

# Extension Icon

The Plasmo framework automatically generates smaller resolution versions of icons for the built bundle. Thus, all you need to work on is the high-fidelity version!

By default, Plasmo reads the `assets/icon.png` file for the extension icon. Optionally, you can use these names instead of `icon`:

| icon512 | icon-512 | icon-512x512 | icon1024 | icon-1024 | icon-1024x1024 |
| :------ | :------- | :----------- | -------- | --------- | -------------- |

The alternative names are helpful to clarify the size of the original icon. However, Plasmo will only pick one file.

<Callout emoji="👉">
  Ensure your icon file is inside the `assets` directory and is a PNG file with
  the `.png` extension.
</Callout>

## Development Icon

In [development mode](/framework/workflows/dev), Plasmo converts the icon to grayscale to help distinguish it from the production bundle:

![gray-scaled icon](@screenshots/extension-icon-example.png)

### Custom Development Icon

If you don't want the default grayscale behavior, you can place an `icon.development.png` file in the `assets` directory. Plasmo will use this file instead of the `icon.png` file in development mode.

## Tag Specific Icons

To use a different icon for a specific [build tag](/framework/workflows/build#with-a-custom-tag), name your icon file as follows:

- `icon.<tag>.png`
- `icon.<tag>.<NODE_ENV>.png`

## Icon Sizes

Plasmo generates the following icon sizes (in px):

| 16x16 | 48x48 | 64x64 | 32x32 | 128x128 |
| ----- | ----- | ----- | ----- | ------- |

You can override a specific size by placing any of the following files in the `assets` directory:

| Base                     | Env-specific                        |
| :----------------------- | :---------------------------------- |
| `icon<size>.png`         | `icon<size>.<NODE_ENV>.png`         |
| `icon-<size>.png`        | `icon-<size>.<NODE_ENV>.png`        |
| `icon-<size>x<size>.png` | `icon-<size>x<size>.<NODE_ENV>.png` |
